<template>
	<view>
		<view class="content">
			<view class="order_box">
				<view class="number">物流单号：{{goods.express_code}}</view>
				<view class="state">{{goods.arr[goods.express_corp]}}</view>
			</view>
			<view class="goods_box" v-for="(c,index) in goods.data" :key="'goods' + index">
				<image class="goods_img" :src="c.image" mode="scaleToFill"></image>
				<view class="title">{{ c.name }}</view>
				<view class="num">x{{ c.quantity }}</view>
				
				
				<view class="money" v-if='goods.pay_type==1'>￥{{ c.price }}</view>
					<!-- <view class="money" v-if='goods.pay_type==2'>￥{{ c.price }}+{{ c.znj}}%助农劵</view>
						<view class="money" v-if='goods.pay_type==3'>积分：{{ c.znb}}</view> -->
				<view class="time" v-if="c.sku_dkr " style="">规格：{{ c.sku_dkr }}</view>
				<view class="time" v-else>规格：默认</view>
			</view>
			<view class="order_box">
				<view class="address" style="top:2vw">收货地址：{{goods.address_info}}</view>
				
			</view>
		</view>

		

		<view class="title_box">物流信息<view style="color: #f80000;font-size: 18px;"></view><view style="color: #f80000;font-size: 12px;"></view>
		</view>

		<block v-for="(item, index) in goods.kd.data" :key="index">
			<view class="content_list">
				<view class="round_box">
					<view class="round">
						<view class="r"></view>
					</view>
				</view>
				<view class="list_box">
					<view class="line" :style="index == (goods.kd.data.length-1) ? 'height:50%':''" ></view>
					<view class="man_box">
					
				
						<view class="time">{{item.time}}</view>

					</view>
					<view class="text_box">{{item.context}}</view>

				</view>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods:'',
			}
		},
	onLoad(e) {
		let me = this;
	
	
		me.Net._post('kd',{id:e.id},(res)=>{
			if(res.code ==1){
				me.goods=res.data
			  console.log(res.data)
			}
		});	
	},
		methods: {
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		}
	}
</script>


<style>
	.title_box {
		width: calc(100% - 32px);
		height: 50px;
		display: flex;
		margin-left: 16px;
		font-size: 14px;
		color: #333;
		line-height: 50px;
		letter-spacing: 2px;
	}

	.content_list {
		width: 100%;

		display: flex;
	}

	.content_list .round_box {
		width: 9vw;
		height: 100%;
	}

	.content_list .round_box .line {
		width: 1px;
		height: calc(100% - 3vw);
		border-right: 1px dashed #B3B3B3;
		margin: 0 auto;
	}

	.content_list .round_box .round {
		width: 3vw;
		height: 3vw;
		border-radius: 50%;
		background-color: #E6E6E6;
		margin: 0 auto;
		position: relative;
	}

	.content_list .round_box .round .r {
		width: 1.5vw;
		height: 1.5vw;
		border-radius: 50%;
		background-color: #C4C4C4;
		position: absolute;
		left: calc(50% - 0.75vw);
		top: calc(50% - 0.75vw);
	}



	.content_list .list_box {
		flex: 1;
		height: 100%;
		position: relative;
		padding-bottom: 3vw;
		margin-right: 4%;
		border-radius: 2vw;
	}

	.content_list .list_box .line {
		width: 1px;
		height: calc(100% - 3vw);
		border-right: 1px dashed #B3B3B3;
		position: absolute;
		top: 3vw;
		left: -4.5vw;
	}

	.content_list .list_box .man_box {
		width: 100%;
		height: 10.5vw;
		position: relative;
		background-color: #fff;
		border-radius: 2vw 2vw 0 0;
	}

	.content_list .list_box .man_box .portrait {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		position: absolute;
		left: 1.5vw;
		top: 1.5vw;
	}

	.content_list .list_box .man_box .portrait image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.content_list .list_box .man_box .name {
		font-size: 3vw;
		color: #333;
		position: absolute;
		left: 10.5vw;
		top: 1.5vw;
	}

	.content_list .list_box .man_box .time {
		font-size: 3vw;
		color: #999;
		position: absolute;
		left: 4.5vw;
		bottom: 1.5vw;
	}



	.content_list .list_box .text_box {
		background-color: #fff;
		font-size: 3.5vw;
		color: #333;
		line-height: 5vw;
		padding: 0px 3vw 1.5vw 4.5vw;
		border-radius: 0 0 2vw 2vw;
	}



	

	.menubg01 {
		background-color: #f80000 !important;
		padding-top: 13.5vw !important;
	}

	.menubg02 {
		background-color: #f80000 !important;
		padding-top: 14.5vw !important;
	}
	
	
	
	.content {
		width: 92%;
		margin: 0 auto;
		background: #fff;
		border-radius: 1.5vw;
		margin-top: 3%;
		padding-bottom: 3vw;
	}
	
	.content .order_box {
		width: 100%;
		height: 10.5vw;
		position: relative;
	}
	
	.content .order_box .number {
		font-size: 3.5vw;
		color: #333;
		line-height: 10.5vw;
		position: absolute;
		left: 3vw;		
	}
	
	.content .order_box .address{
		font-size: 3.5vw;
		color: #333;
		line-height: 5vw;
		position: absolute;
		left: 3vw;	
		width: calc(100% - 6vw);
		
	}
	
	.content .order_box .state {
		font-size: 3.5vw;
		color: #333;
		line-height: 10.5vw;
		position: absolute;
		right: 3vw;
	}
	
	.content .goods_box {
		width: 100%;
		height: 25vw;
		position: relative;
	}
	
	.content .goods_box .goods_img {
		width: 25vw;
		height: 25vw;
		border-radius: 2vw;
		position: absolute;
		left: 3vw;
	}
	
	.content .goods_box .title {
		font-size: 3.5vw;
		color: #333;
		width: calc(100% - 40vw);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		position: absolute;
		left: 30vw;
	}
	
	.content .goods_box .num {
		font-size: 3.5vw;
		color: #666;
		width: 12vw;
		text-align: right;
		position: absolute;
		right: 3vw;
	}
	
	.content .goods_box .time {
		font-size: 3.5vw;
		color: #666;
		position: absolute;
		left: 30vw;
		top: 11vw;
	}
	
	.content .goods_box .money {
		font-size: 3.5vw;
		color: #f80000;
		position: absolute;
		left: 30vw;
		top: 18vw;
	}
	
	
</style>
